<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#409EFF"><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalCases }}</div>
              <div class="stat-label">测试用例</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#67C23A"><VideoPlay /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalExecutions }}</div>
              <div class="stat-label">执行次数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#E6A23C"><PieChart /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.successRate }}%</div>
              <div class="stat-label">成功率</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#F56C6C"><Setting /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalEnvironments }}</div>
              <div class="stat-label">环境配置</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最近执行记录</span>
              <el-button type="text" @click="$router.push('/executions')">查看更多</el-button>
            </div>
          </template>
          <el-table :data="recentExecutions" style="width: 100%">
            <el-table-column prop="test_case_name" label="测试用例" />
            <el-table-column prop="status_display" label="状态">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">
                  {{ scope.row.status_display }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="execution_time" label="执行时长">
              <template #default="scope">
                {{ scope.row.execution_time ? `${scope.row.execution_time}s` : '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="created_at" label="执行时间">
              <template #default="scope">
                {{ formatDate(scope.row.created_at) }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>测试用例分布</span>
            </div>
          </template>
          <div class="chart-container">
            <div ref="pieChart" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>快速操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-button type="primary" @click="$router.push('/testcases')">
              <el-icon><Document /></el-icon>
              创建测试用例
            </el-button>
            <el-button type="success" @click="$router.push('/environments')">
              <el-icon><Setting /></el-icon>
              配置环境
            </el-button>
            <el-button type="warning" @click="$router.push('/reports')">
              <el-icon><PieChart /></el-icon>
              查看报告
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { executionAPI } from '@/api'

export default {
  name: 'Dashboard',
  setup() {
    const stats = ref({
      totalCases: 0,
      totalExecutions: 0,
      successRate: 0,
      totalEnvironments: 0
    })
    
    const recentExecutions = ref([])
    const pieChart = ref(null)

    const loadDashboardData = async () => {
      try {
        // 这里应该调用实际的API获取数据
        // 目前使用模拟数据
        stats.value = {
          totalCases: 25,
          totalExecutions: 156,
          successRate: 92.3,
          totalEnvironments: 3
        }
        
        const response = await executionAPI.getList({ page_size: 5 })
        recentExecutions.value = response.results || []
      } catch (error) {
        console.error('加载仪表盘数据失败:', error)
      }
    }

    const getStatusType = (status) => {
      const typeMap = {
        'passed': 'success',
        'failed': 'danger',
        'error': 'danger',
        'running': 'warning',
        'pending': 'info'
      }
      return typeMap[status] || 'info'
    }

    const formatDate = (dateString) => {
      if (!dateString) return '-'
      return new Date(dateString).toLocaleString('zh-CN')
    }

    onMounted(() => {
      loadDashboardData()
    })

    return {
      stats,
      recentExecutions,
      pieChart,
      getStatusType,
      formatDate
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  margin-right: 20px;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.quick-actions .el-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 20px;
}
</style> 